<template>
  <div>
    <p>
      <span>名称：</span><input type="text" v-model.trim="name" />
      <span>价格：</span><input type="text" v-model.trim="price" />
      <button @click="add">添加</button>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      price: "",
    };
  },
  props: ["list"],
  methods: {
    add() {
      if (this.list.some((item) => item.name === this.name)) {
        return alert("该名称已存在");
      }

      if (!this.name.length) {
        return alert("名称不能为空");
      }
      if (!this.price.length) {
        return alert("价格不能为空");
      }
      if (this.name.length && !isNaN(this.price) && this.price.length) {
        this.list.push({
          name: this.name,
          price: this.price,
          num: 1,
          checked: false,
        });
        this.name = "";
        this.price = "";
      }
    },
  },
};
</script>

<style></style>
